import React from 'react';

export default class Counter extends React.Component {

    constructor(props){
        super(props);
        this.stepRef=React.createRef();
        this.state={
            count:0
        }
    }

    // 增加计数器
    increment() {
        // 触发的是redux中的reducer
        const step=this.refs.stepRef.value*1;
        const count=this.state.count+step;
        this.setState({count});
    }
    // 较少计数器
    decrement() {
        // 触发的是redux中的reducer
        const step=this.refs.stepRef.value*1;
        const count=this.state.count-step;
        this.setState({
            count
        });
    }
    render() {
        return <div style={{ padding: 10 }}>

            <span style={{ fontSize: 20 }}>计数器:{this.state.count}</span>
            &nbsp;&nbsp;
            {/* 每次增加或减少的步长 */}
            <select ref="stepRef" style={{padding:'4px 10px'}}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            &nbsp;&nbsp;
            <button onClick={() => this.increment()}>增加</button>
            &nbsp;&nbsp;
            <button onClick={() => this.decrement()}>减少</button>

        </div>
    }
}
